<template>
  <div>watch的使用</div>
  <div>{{ state }}</div>
  <button @click="changeHandle">监听watch</button>
  <hr />

  <div>watch的使用--监听reactive</div>
  <div>{{ datass.count }}</div>
  <button @click="changeStateHandle">监听watch</button>
</template>

<script>
import { ref, watch, reactive } from "vue";
export default {
  setup() {
    const state = ref(0);
    watch(state, (newValue, oldValue) => {
      console.log(`原值为${oldValue}`);
      console.log(`新值为${newValue}`);
      /* 1秒后打印结果：
                  原值为0
                  新值为1
          */
    });
    function changeHandle() {
      state.value++;
    }

    // 监听reactive
    let datass = reactive({ count: 555 });
    watch(
      () => datass.count,
      (newValue, oldValue) => {
        console.log(`原值为${oldValue}`);
        console.log(`新值为${newValue}`);
        /* 1秒后打印结果：
                  原值为0
                  新值为1
          */
      }
    );

    function changeStateHandle() {
      datass.count--;
    }

    return {
      state,
      datass,
      changeHandle,
      changeStateHandle,
    };
  },
};
</script>
